<template>
  <!-- vue3页⾯ -->
  <div class="post-detail-page w-690"
       v-if="currentPost">

    <modal title="删除文章"
           :visible="modalIsVisible"
           @modal-on-close="modalIsVisible = false"
           @modal-on-confirm="hideAndDelete">
      <p>你确定要删除吗？</p>
    </modal>

    <article class=" mb-5 pb-3 ">
      <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"
           aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <router-link to="/">首页</router-link>
          </li>
          <li class="breadcrumb-item">
            <router-link :to="`/column/${currentPost.column}`">专栏首页</router-link>
          </li>
          <li class="breadcrumb-item active"
              aria-current="page">{{ currentPost.title }}</li>
        </ol>
      </nav>

      <img :src="currentImageUrl"
           :alt="currentPost.title"
           v-if="currentImageUrl"
           class="rounded-lg img-fluid my-4">
      <h4 class="mb-4">{{ currentPost.title }}</h4>
      <div
           class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0">
        <div class="col">
          <UserProfile :user="currentPost.author"
                       v-if="typeof currentPost.author === 'object'"></UserProfile>
        </div>
        <span class="text-muted col text-right font-italic">
          发表于:{{ currentPost.createdAt }}
        </span>
      </div>
      <div v-html="currentHTML"></div>
      <div v-if="showEditArea"
           class="btn-group mt-5">
        <router-link :to="`/create?id=${currentPost._id}`"
                     type="button"
                     class="btn btn-success">编辑</router-link>
        <button type="button"
                class="btn btn-danger"
                @click.prevent="modalIsVisible = true">删除</button>
      </div>
    </article>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, onMounted, ref } from 'vue'
import UserProfile from '@/components/UserProfile.vue';
import { GlobalDataProps, PostProps, ImageProps, UserProps, ResponseType } from '@/store';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { marked } from 'marked'
import modal from '@/components/Modal.vue'
import createMessage from '@/components/createMessage';
import router from '@/router';

export default defineComponent({
  name: 'ColumnPostDetail',
  components: { UserProfile, modal },
  setup() {
    const route = useRoute()

    const store = useStore<GlobalDataProps>()

    const currentId = route.params.id

    // 适配markdown语法


    onMounted(() => {
      store.dispatch('fetchPost', currentId)
    })
    const currentPost = computed<PostProps>(() => store.getters.getCurrentPost(currentId))

    //渲染Markdown语法插件
    // eslint-disable-next-line vue/return-in-computed-property
    const currentHTML = computed(() => {
      if (currentPost.value && currentPost.value.content) {
        const { isHTML, content } = currentPost.value
        return isHTML ? content : marked.parse(content)
      } else { return '' }
    })

    // 开启编辑和删除权限
    const showEditArea = computed(() => {
      const { isLogin, _id } = store.state.user
      if (currentPost.value && isLogin && currentPost.value.author) {
        const postAuthor = currentPost.value.author as UserProps
        return postAuthor._id === _id
      } else {
        return false
      }
    })

    //删除文章
    const modalIsVisible = ref(false)
    const hideAndDelete = () => {
      modalIsVisible.value = false
      store.dispatch('deletePost', currentId).then((rawData: ResponseType<PostProps>) => {
        createMessage('删除成功,1S返回专栏首页', 'success', 1000)
        setTimeout(() => {
          router.push({ name: 'column', params: { id: rawData.data.column } })
        }, 1000);
      })
    }

    const currentImageUrl = computed(() => {
      if (currentPost.value && currentPost.value.image) {
        const { image } = currentPost.value
        return (image as ImageProps).url + '?x-oss-process=image/resize,w_750'
      } else {
        return null
      }
    })

    return {
      currentPost,
      currentImageUrl,
      currentHTML,
      showEditArea,
      modalIsVisible,
      hideAndDelete
    }
  }
})
</script>

<style scoped>
</style>